<template>
	<cl-crud :ref="setRefs('crud')" @load="onLoad">
		<el-row type="flex" align="middle">
			<!-- 刷新按钮 -->
			<cl-refresh-btn />
			<!-- 新增按钮 -->
			<cl-add-btn />
			<!-- 删除按钮 -->
			<cl-multi-delete-btn />
			<cl-flex1 />
			<!-- 关键字搜索 -->
			<cl-search-key />
		</el-row>

		<el-row>
			<!-- 数据表格 -->
			<cl-table :ref="setRefs('table')" v-bind="table" />
		</el-row>

		<el-row type="flex">
			<cl-flex1 />
			<!-- 分页控件 -->
			<cl-pagination />
		</el-row>

		<!-- 新增、编辑 -->
		<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
	</cl-crud>
</template>

<script lang="ts">
import { defineComponent, inject, reactive } from "vue";
import { CrudLoad, Upsert, Table } from "cl-admin-crud-vue3/types";
import { useRefs } from "/@/core";

export default defineComponent({
	setup() {
		const { refs, setRefs } = useRefs();
		// 请求服务
		const service = inject<any>("service");

		// 新增、编辑配置
		const upsert = reactive<Upsert>({
			items: [
				{
					prop: "category_id",
					label: "分类",
					span: 24,
					component: {
						name: "categoriesselect",
						props: {
							placeholder: "请输入名称"
						}
					}
				},
				{
					prop: "tiele",
					label: "标题",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入标题"
						}
					},
					rules: {
						required: true,
						message: "标题不能为空"
					}
				},
				{
					prop: "excerpt",
					label: "文章摘要",
					span: 24,
					component: {
						name: "el-input",
						props: {
							placeholder: "请输入摘要",
							type: "textarea"
						}
					}
				},
				{
					prop: "content",
					label: "文章内容",
					span: 24,
					component: {
						name: "cl-editor-quill",
						props: {
							height: "200"
						}
					},
					rules: {
						required: true,
						message: "文章内容不能为空"
					}
				},
				{
					prop: "article_status",
					label: "是否发布",
					span: 6,
					component: {
						name: "el-switch",
						props: {
							type: "textarea"
						}
					}
				},
				{
					prop: "is_sticky",
					label: "是否置顶",
					span: 6,
					component: {
						name: "el-switch",
						props: {
							type: "textarea"
						}
					}
				},
				{
					prop: "is_essence",
					label: "是否加精",
					span: 6,
					component: {
						name: "el-switch",
						props: {
							type: "textarea"
						}
					}
				},
				{
					prop: "comment_status",
					label: "允许评论",
					span: 6,
					component: {
						name: "el-switch",
						props: {
							type: "textarea"
						}
					}
				}
			]
		});

		// 表格配置
		const table = reactive<Table>({
			columns: []
		});

		// crud 加载
		function onLoad({ ctx, app }: CrudLoad) {
			// 绑定 service
			console.log(service);
			ctx.service(service.newsArticles).done();
			app.refresh();
		}

		return {
			refs,
			setRefs,
			upsert,
			table,
			onLoad
		};
	}
});
</script>
